<template>
	<view class="container">
		<z-paging ref="paging" v-model="itemList" @query="queryList" :fixed="true" :auto="true"
			empty-view-img="/static/empty.png" empty-view-text="暂无数据~" :empty-view-img-style="imgStyle">
			<view slot="top">
				<u-navbar height="50" title="收藏列表" title-color="#333" title-size="36">
				</u-navbar>
			</view>
			<view class="itemView" v-for="(item,index) in itemList" :key="index" 
				@click="onDetails(item)" @longpress="onCollect(item)">
				<u-image width="150" height="150" border-radius="10" :src="item.goods.images_format[0]"></u-image>
				<view class="goodsView" v-if="item.goods">
					<view class="goodsTitle">{{item.goods.name}}</view>
					<view class="goodsPrice">¥{{item.goods.min_price}}</view>
				</view>
			</view>
		</z-paging>
		<u-modal v-model="messageModal" :mask-close-able="true" :show-cancel-button="true" content="确认要取消收藏吗？"
			confirm-color="#F6632D" @confirm="onModalConfirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgStyle: {
					width: '12rem',
					height: '9rem'
				},
				messageModal: false,
				goodsId: '',
				itemList: []
			}
		},
		onLoad() {
			this.$nextTick(function() {
				this.$refs.paging.reload();
			});
		},
		methods: {
			queryList(page, pageSize) {
				let self = this;
				self.$api.myGoodsCollect({
					limit: pageSize,
					page: page
				}, true).then(res => {
					self.$refs.paging.complete(res.list);
				}).catch(res => {
					self.$refs.paging.complete();
				});
			},
			onCollect(item) {
				this.goodsId = item.goods_id;
				this.messageModal = true;
			},
			onDetails(item){
				this.$utils.jump('/pages/goods-details/goods-details?id=' + item.goods_id);
			},
			onModalConfirm() {
				let self = this;
				self.$shops.shopCollectCancel({
					goods_id: this.goodsId
				}, false).then(res => {
					self.$refs.paging.reload();
				}).catch(res => {
					console.log(JSON.stringify(res,null,2))
				});
			}
		}
	}
</script>

<style>
	@import url('my-collect.css');

	page {
		background: #f5f5f5;
	}
</style>
